<template>
	<div class="shujuzhongxin">
		<div class="home_shouye">
			<div class="home_shouye1">
				<div class="home_shouye1_1">
					深码数据
				</div>
				<div class="home_shouye1_2">
					<span>{{banben_shu}}</span>
					<span></span>
					
					<div class="home_xiala">
						<ul>
							<li @click="xuanzexiala(index)" v-for="(item,index) in banben" :key="index">{{item.name}}</li>
						</ul>
					</div>
					
				</div>
			</div>
			<div class="home_shouye2">
				<div class="home_shouye2_1">
					<div class="home_shurukuang">
						<input type="search" value="" placeholder="请输入达人名称搜索" />
						<button>
							<i class="el-icon-search"></i>
						</button>
					</div>
				</div>
				<!-- <div class="home_shouye2_2">
					帮助
				</div> -->
				<div class="home_shouye2_3">
					<router-link to="/" style="color: #fff;text-decoration: none;">
						官网
					</router-link>
				</div>
				<div class="home_shouye2_4">
					<img src="../../assets/img/bibi.png" />
					<span>专属顾问</span>
				</div>
				<div class="home_shouye2_5">
					<!-- <img src="../../assets/img/bibi.png" /> -->
					<img :src="$store.state.tou" />
					<span class="zhuyi">{{$store.state.name}}</span>
					
					<div class="geren">
						<p>{{$store.state.name}}</p>
						<p>
							<span>免费版</span>
						</p>
						<ul>
							<li @click="tiaogeren">
								<i class="el-icon-user"></i>个人中心
							</li>
							<li @click="loginOut">
								<i class="el-icon-switch-button"></i>退出登录
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div class="home_xiaban">
			<div class="home_xiabanleft">
				<div class="youcecaidan">
					<div class="guankai">
						<div class="tu_guan1">
							<i v-if="tu_biaoxian" class="el-icon-s-fold"></i>
						</div>
						<div class="tu_guan2">
							<i v-if="!tu_biaoxian" class="el-icon-s-unfold"></i>
						</div>
					</div>
					<el-menu :default-active="daohangjie" text-color="#333" :unique-opened="true" @select="huidiao" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
						<router-link replace :to="'/home/'+$route.params.id+'/gongzuotai'">
							<el-menu-item index="gongzuotai">
							  <i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-gongzuotai"></i>
							  <span style="font-size: 0.4rem;" slot="title">工作台</span>
							</el-menu-item>
						</router-link>
						<router-link replace :to="'/home/'+$route.params.id+'/shujusousuo'">
							<el-menu-item index="shujusousuo">
								  <i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-daohang"></i>
								  <span style="font-size: 0.4rem;" slot="title">数据搜索</span>
							</el-menu-item>
						</router-link>
						
					  <el-submenu index="3">
					    <template slot="title">
						  <i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-bulb"></i>
					      <span style="font-size: 0.4rem;" slot="title">创意洞察</span>
					    </template>
					    <el-menu-item-group>
							<router-link replace :to="'/home/'+$route.params.id+'/shishishipin'">
								<el-menu-item style="font-size: 0.4rem;" index="shishishipin">实时热门视频</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/shishiredian'">
								<el-menu-item style="font-size: 0.4rem;" index="shishiredian">实时热点</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/shujusousuo/shipinsousuo'">
								<el-menu-item style="font-size: 0.4rem;" index="shujusousuo/shipinsousuo">热门视频</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/remenyinyue'">
								<el-menu-item style="font-size: 0.4rem;" index="remenyinyue">热门音乐</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/remenhuati'">
								<el-menu-item style="font-size: 0.4rem;" index="remenhuati">热门话题</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/redianciyun'">
								<el-menu-item index="redianciyun">
								  <span style="font-size: 0.4rem;">热点词云</span>
								  <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/chuangyijingxuan'">
								<el-menu-item index="chuangyijingxuan">
								<span style="font-size: 0.4rem;">创意精选</span>
								<i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								</el-menu-item>
							</router-link>
					    </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="4">
						  <template slot="title">
						    <i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-kaoshi_data"></i>
						    <span style="font-size: 0.4rem;" slot="title">检测分析</span>
						  </template>
						  <el-menu-item-group>
							  <router-link replace :to="'/home/'+$route.params.id+'/douyinhao'">
								  <el-menu-item style="font-size: 0.4rem;" index="douyinhao">我的抖音号</el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/shipinjiance'">
								  <el-menu-item index="shipinjiance">
								  	<span style="font-size: 0.4rem;">视频监测</span>
								  	<i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/zhibojiance'">
								  <el-menu-item index="zhibojiance">
								  	<span style="font-size: 0.4rem;">直播监测</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/huatijiance'">
								  <el-menu-item index="huatijiance">
								  	<span style="font-size: 0.4rem;">话题监测</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="5">
						  <template slot="title">
							<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-daren"></i>
							<span style="font-size: 0.4rem;" slot="title">达人查找</span>
						  </template>
						  <el-menu-item-group>
							  <router-link replace :to="'/home/'+$route.params.id+'/shujusousuo/darensousuo'">
								<el-menu-item style="font-size: 0.4rem;" index="shujusousuo/darensousuo">达人搜索</el-menu-item>
							  </router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="6">
						  <template slot="title">
							<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-fenxi"></i>
							<span style="font-size: 0.4rem;" slot="title">达人分析</span>
						  </template>
						  <el-menu-item-group>
							  <router-link replace :to="'/home/'+$route.params.id+'/darenduibi'">
								  <el-menu-item index="darenduibi">
								  	<span style="font-size: 0.4rem;">达人对比</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/fensijiexi'">
								  <el-menu-item index="fensijiexi">
								  	<span style="font-size: 0.4rem;">粉丝解析</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/fensichonghe'">
								  <el-menu-item index="fensichonghe">
								  	<span style="font-size: 0.4rem;">粉丝重合分析</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
							  <router-link replace :to="'/home/'+$route.params.id+'/pingtaidaren'">
								  <el-menu-item index="pingtaidaren">
								  	<span style="font-size: 0.4rem;">平台达人分布</span>
								    <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								  </el-menu-item>
							  </router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="7">
						  <template slot="title">
							<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-bag_icon"></i>
							<span style="font-size: 0.4rem;" slot="title">电商带货</span>
						  </template>
						  <el-menu-item-group>
							<router-link replace :to="'/home/'+$route.params.id+'/shujusousuo/shangpinsousuo'">
								<el-menu-item index="shujusousuo/shangpinsousuo">
									<span style="font-size: 0.4rem;">商品搜索</span>
								  <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
								</el-menu-item>
							</router-link>
							<router-link replace :to="'/home/'+$route.params.id+'/remenshangping'">
								<el-menu-item style="font-size: 0.4rem;" index="remenshangping">热门商品</el-menu-item>
							</router-link>
							
							<router-link replace :to="'/home/'+$route.params.id+'/daihuodarenbang'">
								<el-menu-item style="font-size: 0.4rem;" index="daihuodarenbang">带货达人榜</el-menu-item>
							</router-link>
							
							<router-link replace :to="'/home/'+$route.params.id+'/zhibodarenbang'">
								<el-menu-item style="font-size: 0.4rem;" index="zhibodarenbang">直播达人榜</el-menu-item>
							</router-link>
							
							<router-link replace :to="'/home/'+$route.params.id+'/daihuoshipinbang'">
								<el-menu-item style="font-size: 0.4rem;" index="daihuoshipinbang">带货视频榜</el-menu-item>
							</router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="8">
						  <template slot="title">
							<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-shuju-copy-copy"></i>
							<span style="font-size: 0.4rem;" slot="title">直播分析</span>
						  </template>
						  <el-menu-item-group>
							  <router-link replace :to="'/home/'+$route.params.id+'/xiaoshibang'">
							  	<el-menu-item style="font-size: 0.4rem;" index="xiaoshibang">小时榜</el-menu-item>
							  </router-link>
							  
							  <router-link replace :to="'/home/'+$route.params.id+'/yinlangbang'">
							  	<el-menu-item style="font-size: 0.4rem;" index="yinlangbang">音浪收入榜</el-menu-item>
							  </router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <el-submenu index="9">
						  <template slot="title">
							<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-dingwei"></i>
							<span style="font-size: 0.4rem;" slot="title">品牌追踪</span>
						  </template>
						  <el-menu-item-group>
							  <router-link replace :to="'/home/'+$route.params.id+'/wodepinpai'">
							  	<el-menu-item index="wodepinpai">
							  		<span style="font-size: 0.4rem;">我的品牌</span>
							  	  <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
							  	</el-menu-item>
							  </router-link>
							  
							  <router-link replace :to="'/home/'+$route.params.id+'/shujusousuo/pinpaisousuo'">
							  	<el-menu-item index="remenpinpai">
							  		<span style="font-size: 0.4rem;">热门品牌</span>
							  	  <i style="color: #999;margin-left:0.1rem ;font-size: 0.5rem;" class="el-icon-lock"></i>
							  	</el-menu-item>
							  </router-link>
						  </el-menu-item-group>
					  </el-submenu>
					  
					  <router-link replace :to="'/home/'+$route.params.id+'/shoucangjia'">
						  <el-menu-item index="10">
								<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-shoucang"></i>
								<span style="font-size: 0.4rem;" slot="title">收藏夹</span>
						  </el-menu-item>
					  </router-link>
						
						<router-link replace :to="'/home/'+$route.params.id+'/xufeizhongxin'">
							<el-menu-item index="xufeizhongxin">
								<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-xufei"></i>
								<span style="font-size: 0.4rem;" slot="title">续费中心</span>
							</el-menu-item>
						</router-link>
						
						<router-link replace :to="'/home/'+$route.params.id+'/gerenzhongxin'">
							<el-menu-item index="gerenzhongxin">
								<i style="color: #0091FF;margin-right:0.3rem ;font-size: 0.5rem;" class="iconfont icon-menu5_a"></i>
								<span style="font-size: 0.4rem;" slot="title">个人中心</span>
							</el-menu-item>
						</router-link>
					</el-menu>
				</div>
			</div>
			<div class="home_xiabanright">
				<keep-alive>
					<router-view></router-view>
				</keep-alive>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'home',
		data(){
			return{
				
				banben_shu:'',
				banben:[
					{"name":"抖音版"},{"name":"快手版"},{"name":"B站版"},{"name":"微博版"},{"name":"小红书版"}
				],
				
				//左侧菜单
				 isCollapse: false,
				 tu_biaoxian:true,
				 shifoujia:0,
				 
				 daohangjie:'gongzuotai',
			}
		},
		//实时路由监控获取当前路由变化
		watch:{
		  $route(to,from){
			this.daohangjie=to.path.split("/")[3];
		  }
		},
		created(){
			//改变window.localStorage的luyoushu
			window.localStorage.setItem("luyoushu",this.$store.state.luyoushu)
			
			//当前导航的版本
			if(this.$store.state.luyoushu==0){
				this.banben_shu="抖音版"
			}else if(this.$store.state.luyoushu==1){
				this.banben_shu="快手版"
			}else if(this.$store.state.luyoushu==2){
				this.banben_shu="B站版"
			}else if(this.$store.state.luyoushu==3){
				this.banben_shu="微博版"
			}else if(this.$store.state.luyoushu==4){
				this.banben_shu="小红书版"
			}
			
			this.zhiding();
		},
		mounted:function(){
			//获取屏幕的宽度
			// console.log(document.body.offsetWidth,"屏幕宽度")
			if(document.body.offsetWidth<=1340){
				var _self=this;
				_self.isCollapse=!_self.isCollapse;
				_self.tu_biaoxian=false;
				
				$(".tu_guan1").parents(".guankai").css({
					"width":'2rem',
					'transition': 'all 1s ease'
				})
				$(".tu_guan1").parents(".youcecaidan").css({
					"width":'2rem',
					'transition': 'all 1s ease'
				})
				
				$(".tu_guan1").parents(".home_xiabanleft").siblings(".home_xiabanright").css({
					"width":"92%",
					'transition': 'all 1s ease'
				})
			}
			
			this.daohangjie=this.$route.path.split("/")[3];
			// console.log(luyou)
			//判断cookie是否存在，确定左侧菜单的选项
			// if(this.getCookie('zuocecaidan')==null){
			// 	this.caidan='1';
			// }else{
			// 	this.caidan=this.getCookie('zuocecaidan')
			// }
			
			var _self=this;
			
			$(".tu_guan1").click(function(){
				_self.isCollapse=!_self.isCollapse;
				_self.tu_biaoxian=false;
				
				// $(this).parents(".guankai").addClass("guankai1")
				// $(this).parents(".guankai1").removeClass("guankai")
				
				$(this).parents(".guankai").css({
					"width":'1.6rem',
					'transition': 'all 1s ease'
				})
				
				$(this).parents(".home_xiabanleft").siblings(".home_xiabanright").css({
					"width":"92%",
					'transition': 'all 1s ease'
				})
				$(this).parents(".youcecaidan").css({
					"width":'2rem',
					'transition': 'all 1s ease'
				})
			})
			$(".tu_guan2").click(function(){
				_self.isCollapse=!_self.isCollapse;
				_self.tu_biaoxian=true;
				
				// $(this).parents(".guankai1").addClass("guankai");
				// $(this).parents(".guankai").removeClass("guankai1")
				$(this).parents(".guankai").css({
					"width":'5rem',
					'transition': 'all 1s ease'
				})
				
				$(this).parents(".home_xiabanleft").siblings(".home_xiabanright").css({
					"width":"85%",
					'transition': 'all 1s ease'
				})
				$(this).parents(".youcecaidan").css({
					"width":'5rem',
					'transition': 'all 1s ease'
				})
			})
			
		},
		methods:{
			//个人中心跳转
			tiaogeren(){
				this.$router.push('/home/'+this.$route.params.id+'/gerenzhongxin')
			},
			
			zhiding(){
				// 让页面回到顶部---效果(滚动动画回到顶部)
				let top = document.documentElement.scrollTop || document.body.scrollTop
				// 实现滚动效果 
				let timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50
					if (top <= 0) {
					  clearInterval(timeTop)
					}
				}, 10)
			},
			
			//退出登录
			loginOut(){
				var kong="";
				this.$store.commit("loginNo",kong)
				this.$router.push("/index")
			},
			
			//左侧菜单
			 handleOpen(key, keyPath) {
				console.log(key, keyPath);
			 },
			 handleClose(key, keyPath) {
				console.log(key, keyPath);
			 },
			 //获取cookie的方法
			 getCookie(name) { //获取指定名称的cookie值
				 // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
				 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
				 if(arr != null) {
				   // console.log(arr);
				   return unescape(arr[2]);
				 }
				 return null;
			 },
			 //左侧导航回调
			 huidiao(index){
				 //调用vuex的方法
				 // this.$store.commit("innum",index);
				 //将值存入cookie
				// document.cookie = 'zuocecaidan' + "=" +index; 
				// //取出cookie值
				// this.caidan=this.getCookie('zuocecaidan');
			 				 
			 },
			
			//导航选择版本
			xuanzexiala(index){
				let lujin=this.$route.path.split("/").length;
				
				window.localStorage.setItem('luyoushu',index);
				
				// console.log(this.$route.path.split("/"),lujin)
				let lujin1='/'+this.$route.path.split("/")[3];
				let lujin2='/'+this.$route.path.split("/")[4];
				let lujin3='/'+this.$route.path.split("/")[5];
				this.banben_shu=this.banben[index].name;
				if(this.banben_shu=="抖音版"){
					const loading = this.$loading({
					  lock: true,
					  text: '请等待......',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(()=>{
						loading.close();
						if(lujin==4){
							this.$router.push("/home/0"+lujin1);
						}else if(lujin==5){
							this.$router.push("/home/0"+lujin1+lujin2);
						}else if(lujin==6){
							this.$router.push("/home/0"+lujin1+lujin2+lujin3);
						}
					},500)
					setTimeout(()=>{
						location.reload();
					},1000)
					
				}
				if(this.banben_shu=="快手版"){
					const loading = this.$loading({
					  lock: true,
					  text: '请等待......',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(()=>{
						loading.close();
						if(lujin==4){
							this.$router.push("/home/1"+lujin1);
						}else if(lujin==5){
							this.$router.push("/home/1"+lujin1+lujin2);
						}else if(lujin==6){
							this.$router.push("/home/1"+lujin1+lujin2+lujin3);
						}
					},500)
					setTimeout(()=>{
						location.reload();
					},1000)
				}
				if(this.banben_shu=="B站版"){
					const loading = this.$loading({
					  lock: true,
					  text: '请等待......',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(()=>{
						loading.close();
						if(lujin==4){
							this.$router.push("/home/2"+lujin1);
						}else if(lujin==5){
							this.$router.push("/home/2"+lujin1+lujin2);
						}else if(lujin==6){
							this.$router.push("/home/2"+lujin1+lujin2+lujin3);
						}
					},500)
					setTimeout(()=>{
						location.reload();
					},1000)
				}
				if(this.banben_shu=="微博版"){
					const loading = this.$loading({
					  lock: true,
					  text: '请等待......',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(()=>{
						loading.close();
						if(lujin==4){
							this.$router.push("/home/3"+lujin1);
						}else if(lujin==5){
							this.$router.push("/home/3"+lujin1+lujin2);
						}else if(lujin==6){
							this.$router.push("/home/3"+lujin1+lujin2+lujin3);
						}
					},500)
					setTimeout(()=>{
						location.reload();
					},1000)
				}
				if(this.banben_shu=="小红书版"){
					const loading = this.$loading({
					  lock: true,
					  text: '请等待......',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					setTimeout(()=>{
						loading.close();
						if(lujin==4){
							this.$router.push("/home/4"+lujin1);
						}else if(lujin==5){
							this.$router.push("/home/4"+lujin1+lujin2);
						}else if(lujin==6){
							this.$router.push("/home/4"+lujin1+lujin2+lujin3);
						}
					},500)
					setTimeout(()=>{
						location.reload();
					},1000)
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
	.shujuzhongxin{
		
		.home_shouye{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: #0091FF;
			padding: 0.5rem 2rem;
			width: 100%;
			box-sizing: border-box;
			
			.home_shouye1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.home_shouye1_1{
					font-size: 0.8rem;
					color: #fff;
				}
				.home_shouye1_2{
					cursor: pointer;
					border: 1px solid #fff;
					padding: 0.1rem 0.2rem;
					border-radius:0.08rem ;
					display: flex;
					justify-content: space-around;
					margin-left:0.8rem ;
					align-items: center;
					position: relative;
					
					span:nth-of-type(1){
						font-size: 0.3rem;
						color: #fff;
						display: block;
					}
					span:nth-of-type(2){
						display: block;
						border-left:1px solid #fff ;
						border-bottom:1px solid #fff ;
						width: 0.2rem;
						height: 0.2rem;
						transform: rotate(-45deg);
						margin-left:0.4rem ;
						margin-top:-0.1rem ;
					}
					
					.home_xiala{
						padding-top:0.2rem ;
						opacity: 0;
						position: absolute;
						top: 0.64rem;
						left: -0.16rem;
						width: 2.2rem;	
						transform-origin:center top;
						transition: all 0.5s ease;
						transform: rotate(-180deg);
						
						ul{
							box-shadow: 0 0.1rem 0.15rem rgba(0,0,0,0.4);
							list-style: none;
							padding-top:0.1rem ;
							background-color: #fff;
							border-radius:0.1rem ;
							li{
								font-size: 0.35rem;
								padding: 0.2rem 0;
								color: #333333;
								text-align: center;
							}
							li:hover{
								color: #0091FF;
								background-color: #CAE8FF;
								transition: all 0.4s ease;
							}
						}
					}
					.home_xiala::before{
						content: "";
						display: block;
						width: 0;
						height: 0;
						border-left:0.25rem solid transparent ;
						border-right:0.25rem solid transparent ;
						border-bottom:0.3rem solid #fff ;
						margin-left:0.9rem ;
					}
					@keyframes xuan{
						0%{
							transform: rotate(0deg);
						}
						25%{
							transform: rotate(25deg);
						}
						35%{
							transform: rotate(-25deg);
						}
						45%{
							transform: rotate(15deg);
						}
						55%{
							transform: rotate(-15deg);
						}
						65%{
							transform: rotate(6deg);
						}
						75%{
							transform: rotate(-6deg);
						}
						85%{
							transform: rotate(3deg);
						}
						100%{
							transform: rotate(0deg);
						}
					}
				}
				.home_shouye1_2:hover .home_xiala{
					opacity: 1;
					transform: rotate(0deg);
					animation: xuan 1s ease;
					
				}
				
			}
			.home_shouye2{
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.home_shouye2_1{
					margin-right:0.7rem ;
					
					input{
						width: 7rem;
						border-top-left-radius:0.1rem ;
						border-bottom-left-radius:0.1rem ;
						border: none;
						outline: none;
						background-color: #5DB9FF;
						padding: 0.1rem 0.3rem;
						box-sizing: border-box;
						color: #fff;
						display: block;
						float: left;
						height: 1rem;
						letter-spacing: 0.03rem;
						font-size: 0.3rem;
					}
					input::placeholder{
						color: #fff;
						font-size: 0.3rem;
					}
					button{
						cursor: pointer;
						border-top-right-radius:0.1rem ;
						border-bottom-right-radius:0.1rem ;
						width: 1rem;
						height: 1rem;
						box-sizing: border-box;
						float: left;
						display: block;
						outline: none;
						border: none;
						padding: 0.1rem;
						background-color: #9BD5FF;
						color: #fff;
						font-size: 0.5rem;
					}
				}
				
				.home_shouye2_2{
					font-size: 0.4rem;
					color: #fff;
					padding: 0 0.7rem;
					cursor: pointer;
				}
				.home_shouye2_3{
					font-size: 0.4rem;
					color: #fff;
					padding-right:0.7rem ;
					cursor: pointer;
				}
				.home_shouye2_4{
					cursor: pointer;
					padding: 0.2rem 0.4rem;
					img{
						width: 1rem;
						border-radius:50% ;
						float: left;
					}
					span{
						display: block;
						float: left;
						color: #fff;
						font-size: 0.4rem;
						margin-left:0.3rem ;
						margin-top:0.2rem ;
					}
				}
				.home_shouye2_4:hover{
					background-color: #0086EB;
					border-radius:0.8rem ;
				}
				.home_shouye2_5:hover{
					background-color: #0086EB;
					border-radius:0.8rem ;
				}
				@keyframes renren{
					0%{
						transform: rotate(0deg);
					}
					25%{
						transform: rotate(25deg);
					}
					35%{
						transform: rotate(-25deg);
					}
					45%{
						transform: rotate(15deg);
					}
					55%{
						transform: rotate(-15deg);
					}
					65%{
						transform: rotate(6deg);
					}
					75%{
						transform: rotate(-6deg);
					}
					85%{
						transform: rotate(3deg);
					}
					100%{
						transform: rotate(0deg);
					}
				}
				.home_shouye2_5:hover .geren{
					opacity: 1;
					transform: rotate(0deg);
					animation: renren 1s ease;
				}
				.home_shouye2_5{
					cursor: pointer;
					border-radius:0.8rem ;
					padding: 0.2rem 0.4rem;
					margin-left:0.7rem ;
					position: relative;
					img{
						width: 1rem;
						border-radius:50% ;
						float: left;
					}
					.zhuyi{
						display: block;
						float: left;
						color: #fff;
						font-size: 0.4rem;
						margin-left:0.3rem ;
						margin-top:0.2rem ;
					}
					.geren::before{
						content: "";
						display: block;
						border-left:0.2rem solid transparent ;
						border-right:0.2rem solid transparent ;
						border-bottom:0.3rem solid #fff ;
						position: absolute;
						top: 0.1rem;
						left: 48%;
					}
					
					.geren{
						opacity: 0;
						transition: all 0.5s ease;
						position: absolute;
						box-shadow: 0 0.3rem 0.2rem rgba(0,0,0,0.3);
						top:1.2rem;
						transform-origin:center top;
						transform: rotate(180deg);
						left: -0.5rem;
						font-size: 0.35rem;
						width: 4.5rem;
						z-index: 10;
						text-align: center;
						
						p:nth-of-type(1){
							padding-top:0.3rem ;
							border-top-left-radius:0.1rem ;
							border-top-right-radius:0.1rem ;
							background-color: #fff;
							font-size: 0.45rem;
							color: #333333;
							margin-top:0.4rem ;
						}
						p:nth-of-type(2){
							background-color: #fff;
							padding-top:0.4rem ;
							padding-bottom:0.2rem ;
							span{
								border-radius:0.1rem ;
								width: 2rem;
								margin: auto;
								display: block;
								color: #FF8400;
								border: 1px solid #FF8400;
								padding: 0.1rem 0;
							}
						}
						ul{
							border-bottom-left-radius:0.1rem ;
							border-bottom-right-radius:0.1rem ;
							background-color: #fff;
							list-style: none;
							padding-bottom:0.4rem ;
							
							li{
								padding: 0.3rem 0;
							}
							li:nth-of-type(1){
								i{
									margin-right:0.4rem ;
									font-size: 0.4rem;
								}
							}
							li:nth-of-type(2){
								color: #FF4B3C;
								i{
									margin-right:0.4rem ;
									font-size: 0.4rem;
								}
							}
							li:hover{
								background-color: #F1F4FB;
							}
						}
					}
				}

			}
		}
		.home_shouye::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.home_xiaban{
			overflow: hidden;
			margin-top:2.6rem ;
			background-color: #F1F4FB;
			// min-height: 88.7vh;
			position: relative;
			
			.home_xiabanleft{
				float: left;
				width: 12%;
				background-color: #fff;
				
				.youcecaidan{
					position: fixed;
					height: 89%;
					overflow: auto;
					width: 5rem;
					background-color: #fff;
					
					.guankai{
						width: 5rem;
						transition: all 1s ease;
						color: #008FFC;
						text-align: center;
						padding: 0.2rem 0;
						background-color: #fff;
					}
					.router-link-active{
						span{
							color: #1890ff;
						}
					}
					.guankai1{
						transition: all 0.5s ease;
						width: 1.6rem;
						color: #008FFC;
						background-color: #fff;
						text-align: center;
						padding: 0.2rem 0;
					}
				}
				.youcecaidan::-webkit-scrollbar{
					display: none;
				}
			}
			.home_xiabanright{
				margin-top:1rem ;
				margin-right:1rem ;
				width: 85%;
				float: right;
				transition: all 0.5s ease;
			}
		}
		.home_xiaban::after{
			content: "";
			display: block;
			clear: both;
		}
	}
</style>